<template>
    <div class="main">
        <div class="actvie_box">
            <h3>通知公告</h3>
            <hr style="margin-bottom: 30px;">
            <div class="actvie_li" v-for="(item, index) in articles" :key="index" @click="detail(item.id)">
                <p class="p_name">{{ index + 1 }}、</p>
                <div class="content_box">
                    <p class="p_name">{{ item.title }}</p>
                    <p class="p_time">发布时间：{{ item.submitTime.slice(0, 10) }}</p>
                    <hr>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { httpService } from "@/utils/httpService";


export default {
    data() {
        return {
            // list: [],
            articles: [],
        }
    },
    mounted() {
        this.getTotalData()
    },
    methods: {
        getTotalData() {
            httpService("/javaApi/baseArticle/list/1/3", "", "get").then((data) => { 
                this.articles = data.object.list;
                this.articleTotal = data.object.tatol;
            });
        },
        // goIn(data) {
        //     this.$router.push({ path: data })
        // },
        detail(id) {
            let routeData = this.$router.resolve({
                name: "ArticleDetail",
                query: { id: id },
            });
            window.open(routeData.href, "_blank");
        },
    },
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}


.main {
    background-color: #fff;
    border-radius: 10px;
    padding: 30px 20px 0;
}

.actvie_box {}

.actvie_box h3 {
    color: #000;
    font-size: 16px;
    margin-bottom: 10px;
}

.actvie_box hr {
    border: none;
    height: 1px;
    background-color: #EDEDED;
    /* margin-bottom: 10px; */
}

.actvie_li {
    display: flex;
    margin-bottom: 15px;
    cursor: pointer;
}

/* .actvie_li hr{
    width: 100%;
} */

.actvie_li .content_box {
    width: 100%;
}

.actvie_li .p_name {
    color: #333333;
    font-size: 14px;
    line-height: 1.7;
    /* font-weight: bold; */
}

.actvie_li .p_time {
    color: #999999;
    font-size: 12px;
    margin-top: 6px;
    margin-bottom: 15px;
}

@media only screen and (min-width: 1024px) {}

@media only screen and (max-width: 1024px) {}
</style>